<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col class="pink">说明：目前支持学科和关键字条件筛选</el-col>
      <el-col>
        <el-row type="flex" justify="end">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            @click="$router.push('/questions/new')"
            >新增试题</el-button
          >
        </el-row>
      </el-col>
    </el-row>
    <el-form
      :inline="true"
      :model="formInline"
      class="queryQuestions"
      label-width="80px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" class="queryQuestions-item">
            <el-select
              v-model="formInline.subjectID"
              placeholder="请选择"
              @change="subjectChange"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" class="queryQuestions-item">
            <el-select v-model="formInline.catalogID" placeholder="请选择">
              <el-option
                v-for="item in list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" class="queryQuestions-item">
            <el-select v-model="formInline.tags" placeholder="请选择">
              <el-option
                v-for="item in taps"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" class="queryQuestions-item">
            <el-input
              v-model="formInline.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型" class="queryQuestions-item">
            <el-select v-model="formInline.questionType" placeholder="请选择">
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" class="queryQuestions-item">
            <el-select v-model="formInline.difficulty" placeholder="请选择">
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" class="queryQuestions-item">
            <el-select v-model="formInline.direction" placeholder="请选择">
              <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" class="queryQuestions-item">
            <el-select v-model="formInline.creatorID" placeholder="请选择">
              <el-option
                v-for="item in people"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注" class="queryQuestions-item">
            <el-input v-model="formInline.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" class="queryQuestions-item">
            <el-input v-model="formInline.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="城市"
            class="queryQuestions-item queryQuestions-item2"
          >
            <el-select
              v-model="formInline.province"
              placeholder="请选择"
              style="margin-right: 5px"
              @change="formInline.city = ''"
            >
              <el-option
                v-for="(item, i) in provinces()"
                :key="i"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select v-model="formInline.city" placeholder="请选择">
              <el-option
                v-for="(item, i) in citys(formInline.province)"
                :key="i"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-button size="small" @click="eliminate">清除</el-button>
            <el-button type="primary" size="small" @click="btnOk"
              >搜索</el-button
            >
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { simple as getTaps } from '@/api/hmmm/tags.js'
import { simple as getList } from '@/api/hmmm/directorys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as getPeople } from '@/api/base/users.js'
import { simple } from '@/api/hmmm/subjects.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
export default {
  name: 'biaoqianlan',
  data () {
    return {
      provinces,
      citys,
      questionType,
      difficulty,
      direction,
      // 表单数据
      formInline: {
        subjectID: null,
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      },
      subjectList: [],
      people: [],
      list: [],
      taps: []
    }
  },
  created () {
    this.simple()
    this.getPeople()
  },
  methods: {
    async btnOk () {
      this.$emit('btnOk', this.formInline)
    },
    async subjectChange () {
      this.formInline.catalogID = ''
      this.formInline.tags = ''
      const { data } = await getList({ subjectID: this.formInline.subjectID })
      this.list = data
      const res = await getTaps({ subjectID: this.formInline.subjectID })
      this.taps = res.data
    },
    async simple () {
      const { data } = await simple()
      this.subjectList = data
    },
    async getPeople () {
      const { data } = await getPeople()
      this.people = data
    },
    eliminate () {
      this.formInline = {
        subjectID: null,
        catalogID: '',
        tags: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      }
      this.list = []
      this.taps = []
    }
  }
}
</script>

<style lang="scss" scoped>
.pink {
  font-size: 12px;
  color: #ffc0d5;
}
.queryQuestions {
  margin-top: 13px;
  .queryQuestions-item {
    margin-right: 0;
    ::v-deep .el-input__inner {
      height: 32px;
      width: 239px;
      font-size: 13px;
    }
  }
  ::v-deep .el-form-item {
    margin-bottom: 15px;
  }
  .queryQuestions-item2 {
    ::v-deep .el-input__inner {
      width: 117px;
    }
  }
}
</style>
